<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

    /**标签选择器*/
    h1{
      color: red;
    }
    div {
      width: 100px;
      height: 100px;
      background-color: yellow;
    /**id选择器*/
    }
    #second{
      background-color: blue;
    }
    .error{
      background-color: red;
    }
    .success{
      background-color: green;
    }
    .msg{
      color: white;
    }
    .header{
      background-color: orange;
    }
    /**伪类选择器*/
    /**伪类选择器的格式是 #+id名 或者.+类名 或者 标签名: + 伪类名 中间的冒号有 and与这种条件*/
    #first:hover {
      background-color: red;
    }
    /**群组选择器*/
    /*群组选择器有 or或这种关系*/
    .msg , .first .error , #first{
      background-color: blue;
    }
    /**类选择器*/

    /**通配选择器*/
    *{
      font-style: italic;
    }
    /**属性选择器*/
    input[type='text']{
      background-color: yellow;
    }
    /**伪类选择器的使用*/
    a:link{ /**链接未访问前的样式*/
      color: blue;
    }
    a:visited{ /**链接已访问后的样式*/
      color: grey;
    }
    a:hover{ /**链接悬停后的样式*/
      color: red;
    }
    a:active{ /**链接点击,激活后一瞬间激活的样式*/
      color: yellow;
    }
    /**后代选择器*/
    div span{
      color: indigo;
    }
    /**子代选择器*/
    #d1>div>span{
      color: red;
    }
  </style>
</head>
<body>
      <div id="d1">
        <span>1</span>
        <div>
          <span>2</span>
          <b>测试文字</b>
          <p>我是 <span>测试</span>段落</p>
        </div>
        <span>3</span>
      </div>
      <a href="https://www.baidu.com">这是一个超链接</a>
      <a href="https://www.pdsu.edu.cn">这是一个超链接</a>
      <a href="aaa">这是一个超链接</a>
      <input type="text" placeholder="hello">
      <input type="password">
      <h1 class="msg header">我是一号标题</h1>
      <p id="first">这是一个段落</p>
      <a href="">我是一个超链接</a> <br>
      <span>我是一个span</span>
      <div>我是一个div</div>
      <div id="second">我是一个div</div>
      <div>我是一个div</div>
      <span class="msg error">错误消息1</span>
      <span class="msg error">错误消息2</span>
      <span class="msg error">错误消息3</span>
      <br>
      <span class="msg success">正确消息1</span>
      <span class="msg success">正确消息2</span>
      <span class="msg success">正确消息3</span>
</body>
</html>